<script setup>
import {useResizeObserver} from '@vueuse/core'
import {ref, onMounted} from 'vue'

/**
 * 接收父组件传递的参数
 * @type {Prettify<Readonly<ExtractPropTypes<{}>>>}
 */
const props = defineProps({
  // 小尾巴侧边导航栏组件展示按钮点击事件处理器函数
  sliderNavDisplayBtnClickHandler: {type: Function, default: () => {}},
})

/**
 * 实现导航栏响应式
 * @type {null}
 */
// logo 元素宽
let logoEleWidth = null
// 导航栏选项元素宽
let navItemsEleWidth = null
onMounted(() => {
  // 获取 logo 元素宽
  logoEleWidth = document.querySelector('.tail-top-nav .tail-top-nav-logo')?.clientWidth
  // 获取导航栏选项元素宽
  navItemsEleWidth = document.querySelector('.tail-top-nav .tail-top-nav-items')?.clientWidth
})
// 用于控制导航栏选项是否显示
const navItemsIsShow = ref(true)
// 顶部导航栏元素引用
const topNavRef = ref(null)
// 监听顶部导航栏元素内容和边框尺寸的变化
useResizeObserver(topNavRef, (entries) => {
  const entry = entries[0]
  // 获取顶部导航栏元素宽
  const {width} = entry.contentRect
  // 当顶部导航栏元素的宽度小于 logo + 导航栏选项元素宽度之和时，导航栏选项隐藏，否则导航栏选项显示
  if (width <= logoEleWidth + navItemsEleWidth) navItemsIsShow.value = false
  else navItemsIsShow.value = true
})
</script>

<template>
  <!-- 小尾巴顶部导航组件 -->
  <div class="tail-top-nav" ref="topNavRef">
    <!-- 小尾巴顶部导航组件 logo -->
    <div class="tail-top-nav-logo">
      <slot name="topNavLogo"></slot>
    </div>
    <!-- 小尾巴顶部导航组件导航选项 -->
    <div
        v-if="navItemsIsShow"
        class="tail-top-nav-items"
    >
      <slot name="topNavItems"></slot>
    </div>
    <!-- 小尾巴侧边导航栏展示按钮 -->
    <div
        v-else
        class="tail-top-nav-slider-nav-display-btn"
        @click="sliderNavDisplayBtnClickHandler"
    >
      <slot name="sliderNavDisplayBtn"></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 小尾巴顶部导航组件
 */
.tail-top-nav {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: var(--tail-top-nav-bgc);
  display: flex;
  justify-content: space-between;
  align-items: center;

  /*
   * 小尾巴顶部导航组件 logo
   */
  .tail-top-nav-logo {

  }

  /*
   * 小尾巴顶部导航组件导航选项
   */
  .tail-top-nav-items {
    display: flex;
    justify-content: end;
    align-items: center;
  }

  /*
   * 小尾巴侧边导航栏展示按钮
   */
  .tail-top-nav-slider-nav-display-btn {
    height: 100%;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--tail-top-nav-font-color);

    &:hover {
      transform: scale(1.15);
    }
  }
}
</style>